<template>
  <div class="loginbox">
    <TopBacground />
    <div class="login">
      <van-icon name="cross close" @click="close()" />
      <van-form @submit="onSubmit">
        <van-field v-model="username" required name="用户名" label="用户名" placeholder="用户名" />
        <van-field
          v-model="password"
          type="password"
          required
          name="密码"
          label="密码"
          placeholder="密码"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">登录</van-button>
        </div>
      </van-form>
      <p>
        没有账号，去
        <router-link to="/regist">注册</router-link>
      </p>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { loginrequest } from "@/api/cheyi.js";
import router from "../../router";
import TopBacground from "../../components/cheyi/mine/TopBacground.vue";

export default {
  components: {
    TopBacground
  },
  data() {
    return {
      username: "",
      password: "",
      token: ""
    };
  },
  methods: {
    // 关闭界面
    close() {
      this.$router.go(-1);
    },
    // 提交表单
    onSubmit() {
      if (this.username.trim() != "" && this.password.trim() != "") {
        {
          loginrequest({
            userName: this.username,
            userPassword: this.password
          }).then(ok => {
            if (ok.data.code == 1) {
              this.$toast.success(ok.data.msg);
              console.log(ok.data);
              // this.store.dispatch("setToken");
              localStorage.setItem("token", ok.data.data);
              this.$toast.fail("localstorage保存token成功！");
              this.$router.push("/mineindex");
            } else {
              this.$toast.fail(ok.data.msg);
            }
          });
        }
      } else {
        this.$toast.fail("输入格式不对");
      }
    }
  }
};
</script>

<style scoped lang="scss">
.loginbox {
  width: 100%;
  padding-top: 34.667vw;
  position: relative;
  .login {
    width: 95%;
    margin: auto;
    ::v-deep .close {
      margin-bottom: 8vw;
      font-size: 6.4vw;
    }
    p {
      padding-right: 5.333vw;
      text-align: right;
      font-size: 3.733vw;
      color: grey;
      a {
        font-size: 4.267vw;
        color: rgb(124, 146, 243);
        text-decoration: underline;
      }
    }
  }
}
</style>